<template>
    <div class="app-container">
        <el-row>
            <el-col>
                <el-button type="primary" @click="addPost">新增</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-table :data="tableData" border style="width: 100%;" height="650px">
                <el-table-column prop="postName" label="岗位名称" align="center"> </el-table-column>
                <el-table-column prop="postCode" label="岗位编码" align="center"></el-table-column>
                <el-table-column prop="postSort" label="岗位排序" align="center"></el-table-column>
                <el-table-column fixed="right" label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <el-button @click="delPost(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-row>
            <Pagination :pageNum="gather.current" :total="gather.total" :pageSize="gather.size" @sizeChange="sizeChange"
                @currentChange="currentChange"></Pagination>
        </el-row>
        <el-dialog title="添加岗位" :visible.sync="dialogFormVisible" @close="handleClose">
            <el-form :model="postForm" :rules="rules" ref="postForm">
                    <el-form-item label="岗位名称" :label-width="formLabelWidth" prop="postName">
                        <el-input v-model="postForm.postName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="岗位编码" :label-width="formLabelWidth" prop="postCode">
                        <el-input v-model="postForm.postCode" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="岗位排序" :label-width="formLabelWidth" prop="postSort">
                        <el-input-number v-model="postForm.postSort" :min="1" :max="1000" label="描述文字"></el-input-number>
                    </el-form-item>
                </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="submitFrom('postForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
          
<script>
import Pagination from '../../../components/Pagination/pagination.vue'
import { addPost, queryPostList, updatePost, delPost, queryPostInfo } from '@/api/sys/post'
export default {
    components: { Pagination },
    name: "Depart",
    data() {
        return {
            gather: {
                current: 1,//默认第一页
                size: 10,//一页展示10条
                total: 0,
            },
            tableData: [
            ],
            dialogFormVisible: false,
            postForm: {
                postSort:1
            },
            formLabelWidth: "120px",
            params: {},
            rules: {
                postName: [
                    { required: true, message: '请输入岗位名称', trigger: 'blur' },
                    { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
                ],
                postCode: [
                    { required: true, message: '请输入岗位编码', trigger: 'blur' },
                    { min: 1, max: 18, message: '长度在 1 到 18 个字符', trigger: 'blur' }
                ],
            }
        };
    },
    watch: {},
    mounted() {
        this.queryAll();
    },
    created() { },
    methods: {
        addPost() {
            this.dialogFormVisible = true;
        },
        // 点击页码及上一页下一页按钮操作
        currentChange(val) {
            this.gather.current = val;
            this.queryAll(); //调用接口方法
        },
        //每页展示几条按钮操作
        sizeChange(val) {
            this.gather.size = val;
            this.queryAll(); //调用接口方法
        },
        queryAll() {
            //发送请求到后端获取菜单数据
            queryPostList(JSON.stringify(this.gather)).then(res => {
                if (res.code === 200) {
                    this.tableData = res.data.records;
                    this.gather.total = res.data.total;
                }
            });

        },
        //新增岗位
        submitFrom(postForm) {
            this.$refs[postForm].validate((valid) => {
                if (valid) {
                    addPost(JSON.stringify(this.postForm)).then(res => {
                        if (res.code == 200) {
                            this.handleClose();
                            this.queryAll();
                        }
                    });
                } else {
                    return false;
                }
            });
        },
        //关闭弹窗
        handleClose() {
            this.dialogFormVisible = false;
            //清空表单
            this.clearForm();
        },

        clearForm() {
            this.userForm = {};
            this.userHeadUrl = "";
        },
    }

};
</script>
          
<style>
.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>